<template>
	<view class="index">
		<view class="topImg">
			<img src="https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/18221707036135867.gif"
				alt="" />
		</view>
		<view class="title">
			<text>个人赏详情页面</text>
			<!-- <text>￥200.00/张</text> -->
		</view>
		<view class="roomBoxTitle">
			<text>盲盒列表</text>
			<!-- <text>剩302张/共312张</text> -->
		</view>
		<view class="itemList">
			<view class="scroll">
				<view class="item" v-for="(item,index) in peopleList" :key="index">
					<view class="">
						<view class="checked" v-if="item.id==1">
							<checkbox v-model="item.selected" color="rgb(240, 206, 173)"
								background-color="rgb(26, 23, 36)" border-color="rgb(240, 206, 173)"
								activeBackgroundColor="rgb(26, 23, 36)" activeBorderColor="rgb(240, 206, 173)"
								@click="handleCheckboxChange(index,item)" />
						</view>
						<img v-if="item.id==1" :src="list.thumb" alt="" />
						<h1 v-if="item.id==1">{{list.name}}</h1>
						<p v-if="item.id==1">零售价：{{list.price}}镇北币</p>
					</view>

					<!-- <p>概率：2.693%</p> -->
				</view>
			</view>
		</view>
		<view class="tips">
			<p>
				<svg t="1706430511251" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="5394" width="16" height="16">
					<path
						d="M511.203556 965.518222a452.778667 452.778667 0 0 1-321.251556-133.12A452.778667 452.778667 0 0 1 56.888889 511.260444 452.721778 452.721778 0 0 1 190.008889 190.008889 452.778667 452.778667 0 0 1 511.146667 56.888889a452.778667 452.778667 0 0 1 321.251555 133.12 452.778667 452.778667 0 0 1 133.12 321.194667 452.778667 452.778667 0 0 1-133.12 321.251555 452.778667 452.778667 0 0 1-321.251555 133.12z m0-844.117333c-104.106667 0-201.955556 40.561778-275.626667 114.176a387.242667 387.242667 0 0 0-114.176 275.626667c0 104.106667 40.561778 202.012444 114.176 275.626666a387.242667 387.242667 0 0 0 275.626667 114.176c104.106667 0 202.012444-40.561778 275.626666-114.176a387.242667 387.242667 0 0 0 114.176-275.626666c0-104.106667-40.561778-201.955556-114.176-275.626667a387.242667 387.242667 0 0 0-275.626666-114.176z m0 106.097778c15.701333 0 37.432889 13.653333 37.432888 32.028444v331.832889c0 18.318222-21.731556 32.824889-37.432888 32.824889s-37.432889-14.506667-37.432889-32.824889V259.527111c0-18.375111 21.731556-32.028444 37.432889-32.028444z m5.006222 565.475555a56.888889 56.888889 0 1 1 0-113.777778 56.888889 56.888889 0 0 1 0 113.777778z"
						fill="#f0cead" p-id="5395"></path>
				</svg>
				购买说明
			</p>
			<p>
				<svg t="1706430511251" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="5394" width="16" height="16">
					<path
						d="M511.203556 965.518222a452.778667 452.778667 0 0 1-321.251556-133.12A452.778667 452.778667 0 0 1 56.888889 511.260444 452.721778 452.721778 0 0 1 190.008889 190.008889 452.778667 452.778667 0 0 1 511.146667 56.888889a452.778667 452.778667 0 0 1 321.251555 133.12 452.778667 452.778667 0 0 1 133.12 321.194667 452.778667 452.778667 0 0 1-133.12 321.251555 452.778667 452.778667 0 0 1-321.251555 133.12z m0-844.117333c-104.106667 0-201.955556 40.561778-275.626667 114.176a387.242667 387.242667 0 0 0-114.176 275.626667c0 104.106667 40.561778 202.012444 114.176 275.626666a387.242667 387.242667 0 0 0 275.626667 114.176c104.106667 0 202.012444-40.561778 275.626666-114.176a387.242667 387.242667 0 0 0 114.176-275.626666c0-104.106667-40.561778-201.955556-114.176-275.626667a387.242667 387.242667 0 0 0-275.626666-114.176z m0 106.097778c15.701333 0 37.432889 13.653333 37.432888 32.028444v331.832889c0 18.318222-21.731556 32.824889-37.432888 32.824889s-37.432889-14.506667-37.432889-32.824889V259.527111c0-18.375111 21.731556-32.028444 37.432889-32.028444z m5.006222 565.475555a56.888889 56.888889 0 1 1 0-113.777778 56.888889 56.888889 0 0 1 0 113.777778z"
						fill="#f0cead" p-id="5395"></path>
				</svg>
				中奖记录
			</p>
		</view>
		<view class="bottom">
			<button class="button" :disabled="!hasSelectedItems" @click="open">
				抽奖
			</button>
		</view>
		<!-- <view class="gift">
			再抽6次获得赠品
		</view> -->
		<uni-popup ref="popup" type="bottom">
			<view class="pay">
				<h3>{{list.name}}</h3>
				<view class="price">
					<text>单价：</text>
					<text>{{list.price}}镇北币</text>
				</view>
				<view class="num">
					<text>数量：</text>
					<text>购1盒</text>
				</view>
				<view class="preferential">
					<text>可用红包：</text>
					<text>暂无可用红包</text>
				</view>
				<view class="sum">
					<text></text>
					<text>小计：{{list.price}}镇北币</text>
				</view>
				<view class="agree">
					<text>
						<checkbox color="rgb(240, 206, 173)" background-color="#151515"
							border-color="rgb(240, 206, 173)" activeBackgroundColor="#151515"
							activeBorderColor="rgb(240, 206, 173)" />
					</text>
					我已阅读并同意<u>《用户使用协议》</u>
				</view>
				<view class="button" @click="payment">
					确认购买
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		peopleDetails,
		pay,
		peopleCj
	} from "@/api/blind.js";
	import {
		log
	} from "util";
	export default {
		data() {
			return {
				activeRoom: 0,
				peopleList: [],
				// 用于保存勾选状态的数组，初始都是未勾选
				selectedItems: [],
				hasSelectedItems: false, // 用于表示是否有选中的多选框
				// 选中盒子之后的单个盒子的详情
				items: "",
				// 选中盒子之后的第几个盒子
				indexs: "",
				list: ""
			}
		},
		onLoad(e) {
			this.boxId = e.boxId;
			// 盲盒列表
			peopleDetails({
				boxId: this.boxId
			}).then(res => {
				if (res.code == 200) {
					this.peopleList = res.data.boxSkuVo
					this.list = res.data
					this.peopleList.map(item => {
						item.selected = false
						return
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 4000,
					});
				}

			})
		},
		methods: {
			handleCheckboxChange(index) {
				this.peopleList[index].selected = !this.peopleList[index].selected;
				console.log(index);
				// 检查是否至少有一个多选框被选中
				this.hasSelectedItems = this.peopleList.some(item => item.selected);
				console.log(this.hasSelectedItems);
				if (this.hasSelectedItems) {
					this.indexs = index + 1
				}
				// if(){}
			},
			// 确认购买
			payment() {
				let ment = {
					totalMoney: this.list.price,
					couponsId: "",
					payMoney: this.list.price,
					skuId: this.list.id
				}
				uni.showLoading({
					title: '正在支付中...'
				})
				pay(ment).then((res) => {
					if (res.code == 200) {
						// 关闭确认支付的弹框
						this.$refs.popup.close()
						uni.hideLoading()
						uni.showToast({
							title: "支付成功",
							icon: 'none',
							duration: 4000,
						});
						let code = res.message
						// 延时跳转到抽奖页面
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/blind/index2/index2?code='+ code 
							});
						}, 2000);
						// this.choujiang()

					} else if (res.code == 500) {
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 4000,
						});
					}
				})
			},
			// choujiang() {
			// 	let obj = {
			// 		boxId: this.list.id,
			// 		index: this.indexs
			// 	}
			// 	peopleCj(obj).then(res => {
			// 		// if (this.list && this.list.detailImages) {
			// 		uni.previewImage({
			// 			urls: [res.data.detailImages] // 显示中奖的图片
			// 		});
			// 		// this.prizeImage = this.list.detailImages; // 设置中奖图片
			// 		// this.showPreview = true; // 显示预览
			// 		// }
			// 	})

			// },
			changeRoom(index) {
				this.activeRoom = index;
			},
			choose() {
				uni.showModal({
					title: '有确认取消的弹窗',
					content: '确认要删除该项吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('点击了确认')
						} else {
							console.log('点击了取消')
						}
					}
				})
			},
			open() {
				this.$refs.popup.open('bottom')
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #151515;
	}

	.topImg {
		width: 100%;
		height: 460rpx;

		img {
			width: 100%;
			height: 460rpx;
		}
	}

	.title {
		margin-top: -100rpx;
		font-weight: 100;
		font-size: 30rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		line-height: 100rpx;
		background: rgba(0, 0, 0, 0.6);
		color: rgb(240, 206, 173);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6rpx);

		text:nth-child(1) {
			color: #adafc1;
		}
	}

	.roomBoxTitle {
		box-sizing: border-box;
		padding: 0 20rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #adafc1;
		font-weight: 100;
		font-size: 26rpx;

		text:nth-child(1) {
			font-size: 30rpx;
			font-weight: 900;
			background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.roomBox {
		width: 100%;
		overflow: scroll;

		.room {
			margin-top: 30rpx;
			display: flex;
			width: 200%;
			justify-content: start;
			box-sizing: border-box;
			padding: 0 20rpx;

			view {
				border: 3rpx solid #565656;
				box-sizing: border-box;
				margin-right: 30rpx;
				color: #565656;
				width: 100rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-weight: 100;
				font-size: 30rpx;
				text-align: center;
				border-radius: 5rpx;
				background-image: -webkit-linear-gradient(-45deg, rgb(32, 33, 33), rgb(3, 3, 3));
			}

			.active {
				color: rgb(240, 206, 173);
				border: 3rpx solid rgb(240, 206, 173);
				background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
			}
		}
	}

	.itemList {
		width: 100%;
		height: 770rpx;
		margin-top: 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		overflow: scroll;

		.scroll {
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;
			width: 100%;

			.item {
				box-sizing: border-box;
				width: 23%;
				height: 370rpx;
				background: rgb(26, 23, 36);
				border: 3rpx solid #5d4748;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				position: relative;
				margin: 0 1%;
				margin-bottom: 20rpx;

				.checked {
					transform: scale(0.6);
					position: absolute;
					right: 0;
				}

				img {
					width: 150rpx;
					height: 223rpx;
					display: block;
					margin: 10rpx auto;
					border-radius: 20rpx;
				}

				h1 {
					font-size: 26rpx;
					text-align: center;
					color: #ececec;
					margin-bottom: 15rpx;
				}

				p {
					font-size: 23rpx;
					text-align: center;
					font-weight: 100;
					color: #adafc1;
				}
			}
		}
	}

	.tips {
		color: rgb(240, 206, 173);
		display: flex;
		width: 50%;
		justify-content: space-between;
		margin: 100rpx auto 0;
		font-weight: 100;
		font-size: 30rpx;

		p {
			display: flex;
			align-items: center;
		}
	}

	.bottom {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: 900;
			font-size: 35rpx;
			text-align: center;
			border-radius: 5rpx;
			border: 3rpx solid #565656;
			color: #565656;
			background-image: -webkit-linear-gradient(-45deg, rgb(32, 33, 33), rgb(3, 3, 3));
		}

		#all {
			color: rgb(240, 206, 173);
			border: 3rpx solid rgb(240, 206, 173);
			background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
		}
	}

	.gift {
		width: 50%;
		margin: 30rpx auto 0;
		text-align: center;
		border-radius: 50rpx;
		color: rgb(240, 206, 173);
		font-weight: 100;
		font-size: 25rpx;
		padding: 20rpx 0;
		background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
	}

	.pay {
		width: 100%;
		height: 700rpx;
		background-color: #151515;
		border-radius: 50rpx 50rpx 0 0;
		border: 3rpx solid #5d4748;

		h3 {
			margin: 30rpx 0 50rpx;
			text-align: center;
			color: #adafc1;
		}

		.price {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			color: #adafc1;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				font-weight: 900;
				// background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
			}
		}

		.num {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			color: #adafc1;
			margin-bottom: 20rpx;
			font-weight: 100;
		}

		.preferential {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			color: #adafc1;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				color: #6f707b;
			}
		}

		.redPack {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #adafc1;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				font-weight: 900;
				// background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
				display: flex;
				align-items: center;
				height: 100%;
			}
		}

		.sum {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			color: #adafc1;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				font-weight: 900;
				background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.agree {
			color: #adafc1;
			font-size: 25rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				transform: scale(0.6);
				display: block;
			}

			u {
				color: rgb(240, 206, 173);
			}
		}

		.button {
			width: 560rpx;
			height: 80rpx;
			margin: 30rpx auto;
			line-height: 80rpx;
			font-weight: 900;
			font-size: 35rpx;
			text-align: center;
			border-radius: 5rpx;
			color: rgb(240, 206, 173);
			border: 3rpx solid rgb(240, 206, 173);
			background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
		}
	}
</style>